<div class="top-tip">暂不接受单条12分的违章处理</div>
<div class="empty-tip" *ngIf="loading">
  加载中…
</div>
<div class="empty-tip" *ngIf="!list.length && !loading">
  <img src="{{empty}}">
  <p>没有查询到xxxx车辆的违章信息</p>
</div>
<div *ngIf="list.length" style="padding-bottom:50px">
  <div class="car-info-item" *ngFor="let l of list">
    <div class="clear m5">
      <span class="fl ellipsis" style="max-width:80vw">{{l.reason}}</span>
      <img class="fr" src="{{selected}}" *ngIf="l.violation_status==0">
      <img class="fr" src="{{await}}" *ngIf="l.violation_status==1">
      <img class="fr" src="{{forbid}}" *ngIf="l.violation_status==2">
    </div>
    <div class="grey m5">
      <span class="icon">
        <ons-icon icon="map-marker"></ons-icon>
      </span>
      {{l.address}}
    </div>
    <div class="grey m5">
      <span class="icon">
        <ons-icon icon="calendar"></ons-icon>
      </span>
      {{l.time}}</div>
    <div class="m5 ellipsis">提示:无</div>
    <div class="form m5">
      <div>
        <p>扣分</p>
        <p>{{l.point}}</p>
      </div>
      <div>
        <p>服务费</p>
        <p>￥{{l.serviceFee}}</p>
      </div>
      <div>
        <p>罚款</p>
        <p>￥{{l.fine}}</p>
      </div>
      <div>
        <p>滞纳金</p>
        <p>￥{{l.lateFee}}</p>
      </div>
    </div>
  </div>
  <div id="car_info_footer" *ngIf="totalCost>0">
    <div class="fl">
      <p class="txt-m">费用总计: ￥{{totalCost}}</p>
      <p class="grey txt-s">服务须知 已选{{validatedList.length}}条，共{{totalPoint}}分</p>
    </div>
    <div class="fr" (click)="isBindId ? actionSheet.show(): toBindId()">提交支付</div>
  </div>
</div>
<!-- 选择方式 -->
<ons-action-sheet #actionSheet cancelable>
  <div class="action-sheet-mask"></div>
  <div class="action-sheet">
    <ons-action-sheet-button icon="md-square-o" (click)="wxPay();actionSheet.hide()">微信支付</ons-action-sheet-button>
    <ons-action-sheet-button icon="md-square-o" (click)="dialog.show();actionSheet.hide()">线下支付</ons-action-sheet-button>
    <ons-action-sheet-button icon="md-close" (click)="actionSheet.hide()">取消</ons-action-sheet-button>
  </div>
</ons-action-sheet>
<!-- 线下支付 -->

  <ons-dialog animation="default" cancelable #dialog>
      <div class="dialog-mask"></div>
        <div class="dialog">
          <div class="dialog-container" style="height: 200px;">
            <ons-page>
              <ons-toolbar>
                <div class="center">上传凭证</div>
              </ons-toolbar>
              <div class="content" style="margin-top:22px">
                <div class="text-center">
                  <p>打款账户（工商银行）</p>
                  <p>6228 4804 0256 4890 018</p>
                  <br>
                  <div style="position:relative;">
                    <ons-button [disabled]="uploading">
                      <span *ngIf="!uploading">上传凭证照片</span>
                      <span *ngIf="uploading">上传中..</span>
                    </ons-button>
                    <input type="file" accept="image/*" (change)="cashPay($event)">
                  </div>
                </div>
              </div>
            </ons-page>
          </div>
        </div>
    </ons-dialog>
